<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
	 <meta charset="UTF-8">
	 <title th:replace="common/base::pagetitle"></title>
	 <link th:replace="common/base::static"/>
</head>
<body>
<div class="layui-form" style="padding: 20px 30px 0 0;">
	 <div class="layui-form-item">
		  <label class="layui-form-label">模板名称</label>
		  <div class="layui-input-block">
				<input type="text" name="name" style="width: 150px" th:value="${editInfo.name}" lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
		  </div>
	 </div>
	 <div class="layui-form-item">
		  <label class="layui-form-label">模板类型</label>
		  <div class="layui-input-inline">
				<select name="templateType" required="required">
					 <option value="0" th:selected="${editInfo.templateType == null}">请选择</option>
					 <option value="1" th:selected="${editInfo.templateType == 0}">系统模板</option>
					 <option value="2" th:selected="${editInfo.templateType == 1}">用户模板</option>
				</select>
		  </div>
	 </div>
	 <div class="layui-form-item">
		  <label class="layui-form-label">模板业务类型</label>
		  <div class="layui-input-inline">
				<select name="templateBtype" id="templateBtype" required="required">
					 <!--<option value="0" th:selected="${editInfo.templateBtype == null}">请选择</option>
					 <option value="1" th:selected="${editInfo.templateBtype == 0}">企业数据</option>
					 <option value="2" th:selected="${editInfo.templateBtype == 1}">交易数据</option>-->
				</select>
		  </div>
	 </div>
	 <div class="layui-form-item">
		  <label class="layui-form-label">版本号</label>
		  <div class="layui-input-block">
				<input type="text" name="version" style="width: 150px" th:value="${editInfo.version}"  placeholder="请输入版本号,如1.0" autocomplete="off" class="layui-input">
		  </div>
	 </div>
	 <div class="layui-form-item">
		  <label class="layui-form-label">模板描述</label>
		  <div class="layui-input-inline">
				<textarea type="text" style="width: 300px" class="layui-textarea" name="description" th:text="${editInfo.description}" autocomplete="off" placeholder="请输入描述" ></textarea>
		  </div>
	 </div>
	 <div class="layui-form-item layui-hide">
		  <input type="button" lay-submit="" lay-filter="kFormSubmit" id="kFormSubmit" value="确认添加">
		  <input type="text" name="id" id="id" th:value="${editInfo.id}" placeholder="保存ID" autocomplete="off" class="layui-input">
		  <input type="text" name="action" id="action" th:value="${action}" placeholder="保存action" autocomplete="off" class="layui-input">
		  <!--        <input type="text" name="deptId" th:value="${editInfo.deptId}" placeholder="保存deptId" autocomplete="off" class="layui-input">-->
	 </div>
	 <p><button class="layui-btn" id='preview' onclick="preview()">预览模板</button></p>
	 <!--<div class='row'>-->
		  <!--<div class='span12 col-md-12 columns twelve large-12'>-->
				<!--<h2>模板数据</h2>-->
				<!--&lt;!&ndash;<p>通过如下schema生成表单，修改后，点击更新按钮刷新表单<button class='btn btn-primary' id='setschema'>更新 Schema</button></p>&ndash;&gt;-->
				<!--<textarea id='schema' name="schema" th:text="${editInfo.templateData}" style='width: 100%; height: 450px; font-family: monospace;' class='form-control'></textarea>-->
		  <!--</div>-->
	 <!--</div>-->
	 <div class="layui-form-item">
		  <label class="layui-form-label">模板数据</label>
		  <div class="layui-input-inline">
				<textarea id='schema' name="templateData"  class="layui-textarea" th:text="${editInfo.templateData}"  autocomplete="off" style='width: 300px; height: 450px; font-family: monospace;' placeholder="请输入模板数据"></textarea>
		  </div>
	 </div>
	 <p style="color:red">模板数据请使用jsonSchema格式，并且压缩后再上传</p>
</div>

<script th:replace="common/base::context"></script>
<script th:replace="common/base::mainjs"></script>

<script>
	 //业务类型加载
	 
    layui.use(['form'], function () {
        var $ = layui.$, form = layui.form;
        if($("#action").val() != 'edit'){
            $("#preview").hide();
		  }

        wlbKit.get(api.sys.getItemByCode + 'template', '', function (r) {
            var opt = '<option value="">请选择</option>';
            $.each(r.data, function (i, n) {
                opt += '<option value="'+n.value+'" th:selected="${editInfo.templateBtype == '+n.value+'}">'+n.name+'</option>';
            });
            $("#templateBtype").html("");
            $("#templateBtype").html(opt);
        });

        form.on('submit(kFormSubmit)', function (data) {
            var field = data.field; //获取提交的字段
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引

            //提交 Ajax 成功后，关闭当前弹层并重载表格
            $.ajax({
                type: req.type.post,
                url:  BASE_WEB + 'template/info/edit',
                data: field,
                async: false,
                success: function (r) {
                    if (r.code === req.status.ok) {
                        parent.layui.table.reload('kContentTable'); //重载表格
                        parent.layer.close(index); //再执行关闭
                    } else {
                        wlbKit.errorMsg(r.msg);
                    }
                }
            });

        });
        
    });
    function preview(){
        if($("#action").val() != 'edit'){
            wlbKit.layMsg("编辑模板时才可以进行预览");
            return;
		  }
        layui.use('layer', function(){
            var layer = layui.layer;
            var index = layer.open({
                title: '模板预览',
                type: 2,
                area: ["100%","100%"]
                , content:  BASE_WEB + 'template/info/preview?id=' + $("#id").val()
            });
            layer.full(index);
        });
    }
</script>
</body>
</html>